<template>
  <div>
    <el-descriptions :title="title" :column="column" border>
      <el-descriptions-item
        v-for="(item, index) in list"
        :span="item.span"
        :key="index"
        label-width="120px"
      >
        <template #label> {{ item.label }} </template>
        <slot :name="item.prop" :rows="row">
          <span v-if="item.prop === 'canModified'">{{
            row[item.prop] ? "可编辑" : "不可编辑"
          }}</span>
          <span v-else-if="row[item.prop] || row[item.prop]===0">{{ item.value || row[item.prop] }}</span>
          <span v-else class="redTishi">暂无信息</span>
        </slot>
      </el-descriptions-item>
    </el-descriptions>
    <div class="dibuAan">
      <el-button @click="closeDialogPra">关 闭</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
const { row, title, column = 1, list } = props.data;

const emit = defineEmits(["closeDialogP"]);
const closeDialogPra = () => {
  emit("closeDialogP");
};
</script>
<style>
.dibuAan {
  justify-content: right;
  padding: 0 20px;
  box-sizing: border-box;
  padding-top: 20px;
  width: 100%;
  margin-left: 0 !important;
  display: flex;
  padding-bottom: 20px;
}
</style>
